<script>
import {quillEditor} from 'vue-quill-editor';
import 'quill/dist/quill.core.css'; // import styles
import 'quill/dist/quill.snow.css'; // for snow theme
import 'quill/dist/quill.bubble.css'; // for bubble theme
export default {
  components: {
    quillEditor
  },
  data() {
    const userJson = localStorage.getItem("user");
    let userId = '';
    let status = ''
    if (userJson) {
      const user = JSON.parse(userJson);
      userId = user.id;
      status = user.status
    }
    return {
      dataForm: {
        sectionName: '',
        courseUrl:'',
        courseName:  '',
        chapterName: ''

      },
      typeOption: [],
      videoName:'',
      courseId:'',
      chapterId:'',
      dataRule: {
        sectionName: [
          {required: true, message: '课程标题不能为空', trigger: 'blur'}
        ],

        courseUrl: [
          {required: true, message: '课程封面不能为空', trigger: 'blur'}
        ],


      }
    }
  },
  created() {
    this.courseId = this.$route.query.courseId;
    this.chapterId = this.$route.query.chapterId;
    this.dataForm.courseName=this.courseId
    this.dataForm.chapterName=this.chapterId
    console.log(this.courseId)
    console.log(this.chapterId)
  },
  methods: {

    handlePreview(file) {
      console.log(file);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dataForm.courseUrl = file.url;
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleUploadSuccess(res, file) {
      console.log(res, 'res')
      console.log(file, 'file')
      if (res.code===200){
        this.videoName=file.name
        this.dataForm.courseUrl = res.msg
        this.$message.success('上传成功')
      }
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      console.log(file.type, 'file')

    },
    dataFormSubmit() {
      this.request.post('/course/coursesection/save', this.dataForm)
          .then(res => {
            if (res.code === 200) {
              this.$message.success(res.message);
              this.$router.push('/course');
            } else if (res.code === 400) {
              this.$message.error(res.message);

            }
          })
    }
  }
}
</script>

<template>

  <div class="container">
    <div style="margin-top: 10px;width: 800px;margin-left: 200px">
      <el-steps :active="3">
        <el-step title="发布课程" icon="el-icon-edit"></el-step>
        <el-step title="发布章节" icon="el-icon-upload"></el-step>
        <el-step title="发布小节" icon="el-icon-picture"></el-step>
      </el-steps>
    </div>


    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="200px" style="margin-top: 10px">
      <el-form-item label="小节名称" prop="sectionName">
        <el-input style="width: 800px" v-model="dataForm.sectionName" placeholder="请输入小节名称"></el-input>
      </el-form-item>

      <el-form-item label="小节视频" prop="courseUrl">
        <div class="avatar-container">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8888/api/minio/upload"
              :show-file-list="false"
              :on-preview="handlePictureCardPreview"
              :on-success="handleUploadSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <video style="width: 400px;height: 100%" v-if="dataForm.courseUrl" :src="dataForm.courseUrl" class="video-player" controls>
            </video>
            <el-button v-else size="small" type="primary">点击上传</el-button>
          </el-upload>

        </div>
      </el-form-item>







      <span class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()">发布</el-button>
      </span>
    </el-form>

  </div>
</template>


<style scoped>
.container {
  background-color: #fff;
  height: 100%;
  width: 1200px;
  margin-left: 200px;
  position: relative;
  display: flex;
  flex-direction: column; /* 使用列布局 */
  justify-content: space-between; /* 使子元素在容器中垂直方向上分布均匀 */
}

/* 将表单内容放在容器的上半部分 */


/* 将按钮放在底部 */
.dialog-footer {
  display: flex;

  justify-content: center;
  margin-bottom: 15px;
}
</style>